<template>
    <div class="app-container">
        <div class="customContainer">
            <div class="store">
                <el-form size="small">
                    <el-form-item>
                        <el-select
                                placeholder="选择门店"
                                v-model="formInline.store_id"
                                @change="StoreDate"
                                style="width:300px"
                                filterable>
                            <el-option
                                    v-for="item in store_list"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="mainA">
                <div class="left">
                    <div class="left_top">
                        <div class="flex header">
                            <span class="icon el-icon-arrow-left" @click="addYear(1)"></span>
                            <span>{{atYear}}年</span>
                            <span class="el-icon-arrow-right icon" @click="addYear(2)"></span>
                        </div>
                        <el-checkbox-group v-model="formInline.monthCheck" class="center">
                            <div v-for="(item,index) in StoreYearInfo" :key="index" class="monthCheck"
                                 :class="[
                                      modification && (Year > atYear || (Year == atYear && item.Yid < Month) || (Year == atYear && item.Yid == Month && item.plan_id > 0))?'forbid':'',
                                 ]"
                                 @click="select(item)">
                                <el-checkbox :label="item" name="type" class="checkbox"
                                             :disabled="((batchModifyingStatus || batchStatus)&&(Year > atYear || (Year == atYear && item.Yid < Month)) ||(Year == atYear && item.Yid == Month && item.plan_id > 0))"
                                             @change="select(item)" v-show="batchModifyingStatus"><em></em></el-checkbox>
                                <el-badge :is-dot="item.plan_id > 0"  class="span" :class="[
                                 Year < atYear ||(Year <= atYear && item.Yid > Month) ?'white':'',
                                 item.plan_id > 0 && (Year < atYear || (Year == atYear && item.Yid > Month))?'greenyellow':'',
                                 !modification && (item.Yid == (monthCheckList.length > 0?monthCheckList[0].Yid :'') && RightYear == atYear)?'click':'',
                                 batchStatus && (item.Yid == (formInline.monthCheck.length > 0?formInline.monthCheck[0].Yid :'') && formInline.aYear == atYear)?'click':'',
                                 ]">{{item.Yname}}</el-badge>
                            </div>
                        </el-checkbox-group>
                        <div class="flex bottom">
                            <div><span style="background: white"></span>未配置</div>
                            <div><span style="background: #65d8c7"></span>可修改</div>
                            <div><span style="background: #8473e7"></span>选中</div>
                            <div><i style="width: 6px;height: 6px;border-radius: 50%;background: red;margin-right: 5px"></i>已配置</div>
                        </div>
                    </div>
                    <div  class="left_buttom">
                        <p>签到规则：</p>
                        <p class="text">1.签到需到门店，用小程序扫描自助取卡机上的二维码进行签到</p>
                        <p class="text">2.根据一个月内累计签到次数，会获得相应奖励</p>
                        <p class="text">3.当天只能签到一次</p>
                        <p class="text">4.单个用户一天只能在一家店签到，每家店累计签到次数单独计算</p>
                    </div>
                </div>
                <!--            右侧部分-->
                <div class="right">
                    <el-form  :model="formInline" size="small">
                        <el-form-item>
                            <div class="pull-right">
                                <template v-if="!modification">
                                    <el-button type="primary" size="small" @click="batch">修改</el-button>
                                    <el-button type="primary" size="small" @click="batchModifying">批量修改</el-button>
                                </template>
                                <template v-else>
                                    <el-button type="primary" @click="saveDate" size="small">保存</el-button>
                                    <el-button type="primary" size="small" @click="cancel">取消</el-button>
                                </template>
                                <el-button  type="primary" size="small" @click="goPage">签到方案管理</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <template v-if="!modification">
                                <span style="font-size: 20px;font-weight: bold">{{RightYear}}年，</span>
                                <span v-for="(item,index) in monthCheckList" :key="index">{{item.Yname}}</span>
                            </template>
                            <template v-else>
                                <span style="font-size: 20px;font-weight: bold">{{formInline.aYear}}年，</span>
                                <span v-for="(item,index) in formInline.monthCheck" :key="index">{{item.Yname}}，</span>
                            </template>
                        </el-form-item>
                    </el-form>
                    <div style="margin-bottom: 20px;font-size: 14px">当前选择方案： {{signName?signName:'未配置'}}
                        <span style="margin-left: 20px;color: darkgray">一个月内最多可累计签到{{signList.length}}次</span>
                    </div>
                    <el-table highlight-current-row :data="signList" border size="mini" v-loading.body="signListLoading">
                        <el-table-column align="center" label="累计签到" prop="short_connection">
                            <template slot-scope="scope">{{scope.$index+1}}次</template>
                        </el-table-column>
                        <el-table-column align="center" label="商品名称" prop="name"></el-table-column>
                        <el-table-column align="center" label="类型" prop="type_name"></el-table-column>
                        <el-table-column align="center" label="有效期" prop="time"></el-table-column>
                    </el-table>
                    <div v-show="batchStatus || batchModifyingStatus">
                        <div style="margin-top: 15px">选择方案：</div>
                        <el-form size="small" style="margin-top: 10px">
                            <el-form-item>
                                <el-input type="text" v-model="formInline.name" placeholder="请输入方案名称" style="width: 200px;margin-right: 10px"></el-input>
                                <el-button  @click="signlist" type="primary" size="small">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table highlight-current-row :data="list" border size="mini" v-loading.body="listLoading" max-height="320px">
                            <el-table-column align="center" label='序号' width="50">
                                <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
                            </el-table-column>
                            <el-table-column align="center" label="方案名称" prop="name"></el-table-column>
                            <el-table-column align="center" label="操作" width="200px">
                                <template slot-scope="scope">
                                    <el-button @click="selectSign(scope.row)" type="primary" plain size="mini">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="bottom_box">
                            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
                                           layout="prev, pager, next, jumper" :total="totalDataNumber">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getStore,
        storeConfigInfo,
        storeConfigPlan,
        signDetails,
        getInfo,
        getInfoPage
    } from "@/api/operation/sign_management";
    import { getGoodsType } from '@/utils';
    export default {
        name: "sign_management",
        data(){
            return{
                list: null,  //方案数据
                signList:[],
                oldsignList:[],
                oldsignName:"",
                StoreYearInfo:null,
                Year:"",//当前年份
                Month:"",//当前月份
                atYear:"", //表格年份
                modification:false,  //是否为修改状态
                listLoading: false,  //表格换场动画
                signListLoading: false,  //表格换场动画
                batchStatus:false, //单独修改
                batchModifyingStatus:false, //批量修改
                store_list:[],
                currentPage: 1,
                totalDataNumber: 0,
                monthList:[{id:1,name:"1月"},{id:2,name:"2月"},{id:3,name:"3月"},{id:4,name:"4月"},{id:5,name:"5月"},{id:6,name:"6月"},
                    {id:7,name:"7月"},{id:8,name:"8月"},{id:9,name:"9月"},{id:10,name:"10月"},{id:11,name:"11月"},{id:12,name:"12月"}],
                RightYear:"",
                monthCheckList:[],  //当前展示的月份
                plan_id:"", //方案id
                planId:"",
                signName:"",    //方案名称
                selectPlanId:"",  //选择的方案id
                formInline:{
                    store_id:"",
                    aYear:"",  //修改选中的年份
                    status:"1", //查找方案状态 （启用）
                    name:"",  //查找方案名字
                    monthCheck:[] //修改选中的月份
                }
            }
        },
        created() {
            const myDate = new Date();
            this.Year = myDate.getFullYear();
            this.Month = myDate.getMonth()+1;
            this.atYear = this.Year; //设置表格的年份
            this.RightYear = this.Year;  //默认右侧年份
            this.getstore();
        },
        methods:{
            StoreDate(){
                this.planId = 2;
                this.plan_id = "";
                this.signList = [];
                this.signName = "";
                this.batchStatus = false;
                this.modification = false;
                this.atYear = this.RightYear;
                this.batchModifyingStatus = false;
                this.storeInfo();
            },
            getstore() {
                getStore({ category_id: 714 }).then((response) => {
                    this.store_list = response;
                    let data = response.filter(
                        res => res.id == this.$store.getters.optionId
                    );
                    if (data.length > 0) {
                        this.formInline.store_id = data[0].id;
                    }
                }).then(()=>{
                    this.storeInfo();
                });
            },
            addYear(index){
                if(this.batchStatus || this.batchModifyingStatus){
                    this.$message.error("只能选择当前年份进行修改");
                }else{
                    if(index==1){
                        this.atYear--
                    }else{
                        this.atYear++
                    }
                    this.storeInfo();
                }
            },
            batchModifying(){  //批量修改
                this.clearDate();
                this.batchModifyingStatus = true;
                this.batchStatus = false;
            },
            batch(){ //单独修改
                this.clearDate();
                this.batchModifyingStatus = false;
                this.batchStatus = true;
            },
            clearDate(){
                this.formInline.aYear = this.atYear;
                this.oldsignList = this.signList;  //保存当前方案数据
                this.oldsignName = this.signName;//保存当前方案名称
                this.signList = []; //清空表格数据
                this.signName = ""; //清空方案名称
                this.formInline.monthCheck = []; //清空选择修改的月份
                this.modification = true;  //是否为修改状态
                this.signlist(); // 获取方案数据
            },
            select(item){
                if(this.batchStatus || this.batchModifyingStatus){
                    if(this.atYear > this.Year || (this.atYear==this.Year && this.Month < item.Yid) ||
                        (!item.plan_id && (this.atYear==this.Year && this.Month == item.Yid))){
                        if(this.batchStatus){     //单独修改
                            this.$set(this.formInline.monthCheck,0,item);
                        }
                        if(this.batchModifyingStatus){  //批量修改
                            if(this.formInline.monthCheck.includes(item)){
                                this.formInline.monthCheck.splice(this.formInline.monthCheck.findIndex(itam => itam === item), 1);
                            }else{
                                this.formInline.monthCheck.push(item);
                                this.formInline.monthCheck.sort(function (a,b) {
                                    return a.Yid - b.Yid
                                })
                            }
                        }
                    }else{
                        this.$message.error("当前选择的年月不可进行修改");
                        //阻止点击多选框，选择成功
                        const array = this.formInline.monthCheck.findIndex(itam => itam === item);
                        if(this.batchModifyingStatus && array != -1){  //点击多选框的时候触发
                            this.formInline.monthCheck.splice(this.formInline.monthCheck.findIndex(itam => itam === item), 1);
                        }
                    }
                }else{
                    // 查看详情
                    this.signList = [];
                    this.signName = "";
                    this.plan_id = item.plan_id; //获取当月的plan_id
                    this.RightYear = this.atYear;
                    this.$set(this.monthCheckList,0,item);
                    this.signDetail(); //获取方案详情
                }
            },
            cancel(){ //取消
                this.signList = [];
                this.batchModifyingStatus=false;
                this.modification=false;
                this.batchStatus=false;
                this.signDetail();
            },
            selectSign(row){ //选择
                this.signListLoading = true;
                signDetails({plan_id:row.id}).then(res=>{
                    if(res.code==1 && res.data.length >0){
                        this.selectPlanId = row.id;
                        this.signList=this.getGoodsData(res.data);
                        this.signName=this.signList[0].plan_name;
                        this.signListLoading = false;
                    }else{
                        this.signListLoading = false;
                    }
                })
            },
            saveDate(){ //保存
                if(this.formInline.monthCheck.length<=0){
                    this.$message.error("请选择要修改的月份");
                    return
                }
                if(this.signList.length<=0){
                    this.$message.error("请选择当前要修改的方案");
                    return
                }
                let json=[];
                for(let i=0;i<this.formInline.monthCheck.length;i++){
                    json.push({
                        time:this.formInline.monthCheck[i].time,
                        plan_id: this.selectPlanId
                    });
                }

                let data={
                    store_id:this.formInline.store_id,
                    json_list:json
                };

                storeConfigPlan(data).then(res=>{
                    if(res.code==1){
                        this.$message.success(res.message);
                        this.batchModifyingStatus=false;
                        this.modification=false;
                        this.batchStatus=false;
                        this.signList = [];
                        this.planId = 2;
                        this.storeInfo();
                    }
                })
            },
            storeInfo(){ //左侧日历
                storeConfigInfo({
                    store_id:this.formInline.store_id,
                    datetime:this.atYear
                }).then(res=>{
                    if(res.code==1){
                        this.StoreYearInfo=res.data;
                        this.StoreYearInfo.forEach((val,index)=>{
                            val.Yname=this.monthList[index].name;
                            val.Yid=this.monthList[index].id;
                        });
                    }
                }).then(()=>{
                    if(this.planId == ""){  //第一次默认获取当月的数据
                        this.planId = 1;
                        this.monthCheckList = this.StoreYearInfo.filter(res=> res.Yid == (this.Month<10?'0'+this.Month:this.Month));  //筛选出当年当月的数据
                        this.plan_id=this.StoreYearInfo.filter(ras=> this.monthCheckList[0].Yname == ras.Yname)[0].plan_id; //获取当月的plan_id
                        this.signDetail(); //获取方案详情
                    }else if(this.planId == "2"){  //保存成功或者修改门店重新获取
                        this.planId = 1;
                        if(this.atYear == this.RightYear){
                            this.plan_id=this.StoreYearInfo.filter(ras=> this.monthCheckList[0].Yname == ras.Yname )[0].plan_id; //获取右侧选择月份的plan_id
                            this.signDetail(); //获取方案详情
                        }else{
                            this.signList = this.oldsignList;
                            this.signName = this.oldsignName;
                        }
                    }
                })
            },
            signlist(){ //当前门店的方案列表
                this.list = [];
                this.listLoading = true;
                let data={
                    store_id:this.formInline.store_id,
                    name:this.formInline.name,
                    status:this.formInline.status
                };
                getInfoPage(data).then(response=>{
                    this.totalDataNumber = response.data.count / 1;
                    if (this.totalDataNumber == 0) {
                        this.listLoading = false;
                    } else {
                        getInfo(data).then(res=>{
                            this.list = res.data;
                            this.listLoading = false;
                        });
                    }
                });
            },
            signDetail(){  //获取当前方案的详情
                if(this.plan_id){
                    this.signListLoading = true;
                    signDetails({plan_id:this.plan_id}).then(res=>{
                        if(res.code==1){
                            try {
                                this.signListLoading = false;
                                this.signList=this.getGoodsData(res.data);
                                this.signName=this.signList[0].plan_name;
                            }catch (e) {
                              console.log(e)
                            }
                        }
                    })
                }
            },
            getGoodsData(data) {
                data.forEach((val) => {
                    val.type_name = getGoodsType(val.type?val.type:val.second_type);
                    val.time =
                        val.chose_time_type == 1
                            ? val.effect_time.replace(/-/g, ".").replace(/,/g, "-")
                            : val.effect_time > 0
                            ? "购买后" + val.effect_time + "天内有效"
                            : "";
                    val.time = val.time
                        ? val.time
                        : val.effect_time === "0"
                            ? "购买后当天有效"
                            : "购买后立即生效";
                });
                return data;
            },
            handleCurrentChange(val){
                this.listLoading = true;
                let data={
                    store_id:this.formInline.store_id,
                    name:this.formInline.name,
                    status:this.formInline.status
                };
                getInfo(data,val).then(res=>{
                    this.list = res.data;
                    this.listLoading = false;
                }).catch(res => {
                    this.listLoading = false;
                });
            },
            goPage(){
                this.$router.push({
                    name:"operation/sign_package",
                    params:{store_id:this.formInline.store_id}
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .customContainer {
        overflow-y: auto;
    }
    .store{
        padding: 8px 15px;
        min-width: 1040px;
    }
    .mainA{
        width: 100%;
        padding: 8px 15px;
        box-sizing: border-box;
        .left{
            float: left;
            width: 500px;
            .left_top{
                width: 450px;
                padding: 30px;
                background: white;
                .flex{
                    display: flex;
                    justify-content: space-between;
                }
                .header{
                    font-size: 18px;
                    .icon{
                        font-size: 24px;
                        font-weight: bold;
                    }
                    .icon:hover{
                        cursor: pointer;
                    }
                }
                .center{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 25px 0;

                    .monthCheck{
                        width:33.33%;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 18px;
                        /*border: 1px solid #e4e7ed;*/
                        position: relative;

                        .checkbox{
                            position: absolute;
                            left: 5px;
                            top: 5px;
                        }
                    }
                    .monthCheck:hover{
                        cursor: pointer;
                    }
                }
                .bottom{
                    div{
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                    }
                    span{
                        display: block;
                        margin-right: 5px;
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        border: 1px solid #ccc;
                    }
                }
            }
            .left_buttom{
                margin-top: 20px;
                font-size: 18px;
                color: #000;
                .text{
                    text-indent: 2em;
                    font-size: 14px;
                }
            }

        }
        .right{
            overflow:hidden;
        }
    }

    .span{
        display: block;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        border-radius: 50%;
        color: #000
    }

    .white{
        border: 1px solid #ccc;
    }

    .monthCheck .greenyellow{
        background: #65d8c7;
        color: white;
    }
    .monthCheck .click{
        background: #8473e7 !important;
        color: white !important;
    }

    .forbid:hover{
        cursor:not-allowed !important;
    }
    .monthCheck  div.white:hover{
        cursor: pointer !important;
    }
</style>